/**
 * Cesium地球组件，所有Cesium的功能组件都在这里
 * @example
 * <CesiumGlobe
 *    icons={icons}
 *    cesium3DTilesets={cesium3DTilesets}
 *    onLeftClick={this.handleLeftClick}
 *    flyToLocation={flyToLocation}
 *    showShadows={showShadows}
 *    pickObjectEnable={pickObjectEnable}
 *    highlightPickEnable={highlightPickEnable}
 *    homeView={homeView}
 *    cameraPose={cameraPose}
 *    sceneMode={sceneMode}
 *    isMobile={isMobile}
 * />
 */
const CesiumGlobe = React.createClass({
	displayName:'CesiumGlobe',
    getInitialState(){
        /**
         * 组件状态
         * @type {object}
         * @property {boolean} viewerLoaded viewer是否加载完成
         */
        return {
            viewerLoaded : false
        }
    },
    componentDidMount() {
        this.viewer = new Cesium.Viewer(this.cesiumContainer, {
            // globe:newglobe,
            // skyAtmosphere:skyAtmosphere,
            // terrainProvider:ellipsoidTerrainProvdier,
            animation : false,
            // baseLayerPicker : false,
            // fullscreenButton : false,
            geocoder : false,
            // homeButton : false,
            infoBox : false,
            sceneModePicker : false,
            selectionIndicator : true,
            timeline : false,
            // navigationHelpButton : false,
            // scene3DOnly : true,
        });

        // Force immediate re-render now that the Cesium viewer is created
        this.setState({viewerLoaded : true}); // eslint-disable-line react/no-did-mount-set-state

        /**
         * 下面的参数都是初始化地球的参数
         * 在地球加载完成后立刻执行
         * */
            //设置home键的默认位置
        const camera = this.viewer.camera;
        const homeView = this.props.homeView;
        this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo){
            //Zoom to custom extent
            camera.flyTo(homeView);
            //Tell the home button not to do anything.
            commandInfo.cancel = true;
        });
        //隱藏bottomContainer
        // this.viewer.bottomContainer.style.display = 'none';

        //飞往默认位置
        camera.setView(homeView);
    },
    /**
     * 渲染地球上的对象，包括点线面、图表、文字和三维模型等数据
     * @returns {XML} 各种地理实体对象的组合
     */
    renderContents(){
        let contents = null;

        if(this.state.viewerLoaded){
            const viewer = this.viewer;
            const {scene} = viewer;
            const {polylines,homeView,isMobile,sceneMode} = this.props;
            contents = (
                <span>
                    <CesiumProjectContents
                        scene={scene}
                        polylines={polylines}
                    />
                    <CustomCameraInput
                        viewer={viewer}
                        homeView={homeView}
                        isMobile={isMobile}
                        sceneMode={sceneMode}
                    />
                    <div style={isMobile?{position:'absolute',bottom:'1rem',left:'1rem',zIndex:'1000'}:{position:'absolute',top:'5rem',left:'1rem',zIndex:'100'}}>
                        <Compass
                            viewer={viewer}
                            homeView={homeView}
                            sceneMode={sceneMode}
                            compassWidth={66}
                            ringWidth={18}
                        />
                    </div>
				</span>
            )
        }

        return contents;
    },

    componentWillUnmount() {
        if(this.viewer) {
            this.viewer.destroy();
        }
    },
    render() {
        const containerStyle = {
            display: 'block',
            position: 'absolute',
            margin: '0',
            padding: '0',
            border: 'none',
            width: '100%',
            height: '100%'
        };

        const contents = this.renderContents();
        return (
            <span>
                <div
                    style={containerStyle}
                    ref={(ele) => { this.cesiumContainer = ele; }}
                >
                    {contents}
                </div>
            </span>
        )
    }
});
